<template>
  <div class="step-box">
    <el-form ref="form" :model="form" label-width="150px" disabled>
      <div class="form-box">
        <p class="sub-title">收款信息</p>
        <div class="form-item">
          <div class="form-flex-item">
            <el-form-item label="财务账务类型：" prop="accountType">
              <el-radio-group v-model="form.accountType" clearable>
                <el-radio :label="1">对公（开户账号为注册公司开户账号）</el-radio>
                <el-radio :label="0">对私（开户账号为个人银行账号）</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="银行卡号：" prop="bankNo">
              <el-input v-model="form.bankNo" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="开户行所在地：" prop="bankAddress">
              <el-cascader
                v-model="form.bankAddress"
                :options="areaList"
                clearable
              />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="开户行：" prop="bankName">
              <el-input v-model="form.bankName" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="开户行支行名称：" prop="subBankName">
              <el-input v-model="form.subBankName" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <template v-if="form.accountType === 0">
            <div class="form-flex-item">
              <el-form-item label="开户人身份证件：" prop="userCardImg">
                <UploadFile :file-list="form.userCardImg" disabled />
              </el-form-item>
            </div>
            <div class="form-flex-item">
              <el-form-item label="银行预留手机号：" prop="bankReservePhone">
                <el-input v-model="form.bankReservePhone" v-int placeholder="请输入" clearable />
              </el-form-item>
            </div>
          </template>
          <template v-if="form.accountType === 1">
            <div class="form-flex-item">
              <el-form-item label="开户资质类型：" prop="openType">
                <el-select v-model="form.openType" clearable>
                  <el-option
                    v-for="item in principalType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="form-flex-item">
              <el-form-item label="开户名：" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入" clearable />
              </el-form-item>
            </div>
          </template>

        </div>
      </div>
    </el-form>
  </div>
</template>

<script>

import UploadFile from '@/components/UploadFile/index.vue'
import { AREA_LIST, PRINCIPAL_TYPE } from '@/utils/enum'

export default {
  name: 'Step3',
  components: {
    UploadFile
  },
  props: {
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      areaList: AREA_LIST,
      principalType: PRINCIPAL_TYPE,
      form: {}
    }
  },

  watch: {
    formDetail(value) {
      this.form = value
      this.form.bankAddress = this.form.bankAddress?.split(',')
    }
  },

  methods: {
  }
}
</script>
<style lang="scss" scoped>
@import 'step';
</style>
